<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>管理员界面</title>
    <link rel="stylesheet" href="css/manager.css">
    <style>

    </style>
</head>
<body>
<jsp:include page="user_bar.jsp"/>

<div class="box">
    <div class="left">
        <ul id="nav">
            <li class="first"><a>用户管理<i class="iconfont">></i></a></li>
            <li class="second"><a>菜品信息管理<i class="iconfont">></i></a></li>
            <li class="three"><a>订单管理<i class="iconfont">></i></a></li>
            <li class="five"><a>菜品分类管理<i class="iconfont">></i></a></li>
        </ul>
    </div>

    <div class="right">
        <div id="page01" class=" page" style="display:block">
            <div class="page_table">
                <table class="user_01" id="user_list_head"></table>
            </div>
        </div>
        <div id="page02" class=" page" style="display:none">
            <div class="page_table">
                <div style="margin: 20px 100px">
                    <input type="button" id="openbtn_add_dish" value="添加菜品">
                    <div class="overlay" id="overlay_add_dish"></div>
                    <div class="popup" id="popup_add_dish">
                        <form action="javascript:void(0);">
                            <label>菜品名:</label>
                            <input type="text" value="" placeholder="请输入菜名" id="add_dish_input_name"
                                   name="dishName"/><br><br>
                            <label>单价：</label>
                            <input type="text" value="" placeholder="请输入单价" id="add_dish_input_price"
                                   name="disPrice"/><br><br>
                            <label>类别：</label>
                            <select id="add_dish_category">
                                <option value="1">小食</option>
                            </select>
                            <br><br>
                            <label>做法：</label>
                            <input type="text" value="" placeholder="请输入做法" id="add_dish_input_cook"
                                   name="cooking"/><br><br>
                            <label>材料：</label>
                            <input type="text" value="" placeholder="请输入材料" id="add_dish_input_material"
                                   name="material"/><br><br>
                            <label>描述：</label>
                            <input type="text" value="" placeholder="请描述信息" id="add_dish_input_des" name="description"/><br><br>
                            <label>照片：</label>
                            <input type="file" name="imagesRoute"/><br><br>
                            <button id="closebtn_add_dish">关闭</button>
                            <button type="submit">提交</button>
                            <input type="reset" name="reset" style="display: none;"/>
                        </form>
                    </div>
                </div>

                <table class="user_01" id="dish_list_head"></table>

                <div class="page_num_inf">
                    <i></i>共
                    <span id="totalPage"></span>页
                    <span id="totalCount"></span>条
                </div>
                <div class="pageNum">
                    <ul id="pageNum">
                        <%--分页--%>
                    </ul>
                </div>
            </div>
        </div>
        <div id="page03" class=" page" style="display:none">
            <div class="page_table">
                <table class="user_01" id="order_list_head">
                    <%--订单管理--%>
                </table>

                <div class="page_num_inf">
                    <i></i>共
                    <span id="totalPage_o"></span>页
                    <span id="totalCount_o"></span>条
                </div>
                <div class="pageNum">
                    <ul id="pageNum_o">
                        <%--分页--%>
                    </ul>
                </div>

            </div>
        </div>
        <div id="page05" class=" page" style="display:none">
            <div class="page_table">
                <div style="margin: 20px 100px">
                    <input type="button" id="openbtn_add_category" value="添加分类">

                    <div class="overlay" id="overlay_add_category"></div>
                    <div class="popup" id="popup_add_category">
                        <form action="javascript:void(0);">
                            <label>分类名:</label>
                            <input type="text" value="" placeholder="请输入分类名" id="add_category_input"
                                   name="dishName"/><br><br>
                            <button id="closebtn_add_category">关闭</button>
                            <button type="submit" onclick="addCategory();">提交</button>
                            <input type="reset" name="reset" style="display: none;"/>
                        </form>
                    </div>

                    <div class="overlay" id="overlay_edit_category"></div>
                    <div class="popup" id="popup_edit_category">
                        <form action="javascript:void(0);">
                            <label>分类名:</label>
                            <input type="text" id="edit_category_id" style="display: none;"/>
                            <input type="text" value="" placeholder="请输入分类名" id="edit_category_input"/><br><br>
                            <input type="reset" name="reset" style="display: none;"/>
                            <button id="closebtn_edit_category">关闭</button>
                            <button type="submit" onclick="submitEditCategory()">提交</button>
                        </form>
                    </div>
                </div>

                <table class="user_01" id="category_list_head">
                    <%--                    <tr align="center">--%>
                    <%--                        <td>类别</td>--%>
                    <%--                        <td>操作</td>--%>
                    <%--                    </tr>--%>
                    <%--                    <tr class="change">--%>
                    <%--                        <th>火锅</th>--%>
                    <%--                        <th><input type="button" value="删除"></th>--%>
                    <%--                    </tr>--%>
                </table>
            </div>
        </div>
    </div>

</div>
<script>
    let lis = document.querySelectorAll('li')
    let page01 = document.getElementById('page01')
    let page02 = document.getElementById('page02')
    let page03 = document.getElementById('page03')
    let page04 = document.getElementById('page04')
    let page05 = document.getElementById('page05')

    $(function () {
        /*添加菜品*/
        const openbtn_add_dish = document.getElementById('openbtn_add_dish');
        const closebtn_add_dish = document.getElementById('closebtn_add_dish');
        const popup_add_dish = document.getElementById('popup_add_dish');
        const overlay_add_dish = document.getElementById('overlay_add_dish');

        openbtn_add_dish.addEventListener('click', function () {
            popup_add_dish.style.display = 'block';
            overlay_add_dish.style.display = 'block';
            findCategory(0);
        })

        closebtn_add_dish.addEventListener('click', function () {
            popup_add_dish.style.display = 'none';
            overlay_add_dish.style.display = 'none';
            $("input[type=reset]").trigger("click");
        })

        /*添加分类*/
        const openbtn_add_category = document.getElementById('openbtn_add_category');
        const closebtn_add_category = document.getElementById('closebtn_add_category');
        const popup_add_category = document.getElementById('popup_add_category');
        const overlay_add_category = document.getElementById('overlay_add_category');

        openbtn_add_category.addEventListener('click', function () {
            popup_add_category.style.display = 'block';
            overlay_add_category.style.display = 'block';
        })

        closebtn_add_category.addEventListener('click', function () {
            popup_add_category.style.display = 'none';
            overlay_add_category.style.display = 'none';
            $("input[type=reset]").trigger("click");
        })
    })

    //点击导航栏，改变Iframe的src属性，实现页面切换
    for (let i = 0; i < lis.length; i++) {
        //绑定点击事件
        lis[i].onclick = function (event) {
            if (event.target.classList.contains('first')) {
                findUser();
                changPage()
                page01.style.display = 'block'
                for (let i = 0; i < lis.length; i++) {
                    lis[i].style.backgroundColor = "";
                }
                lis[i].style.backgroundColor = " #ffc900";
            } else if (event.target.classList.contains('second')) {
                findDishList();
                changPage()
                page02.style.display = 'block'
                for (let i = 0; i < lis.length; i++) {
                    lis[i].style.backgroundColor = "";
                }
                lis[i].style.backgroundColor = " #ffc900";
            } else if (event.target.classList.contains('three')) {
                findOrderList()
                changPage()
                page03.style.display = 'block'
                for (let i = 0; i < lis.length; i++) {
                    lis[i].style.backgroundColor = "";
                }
                lis[i].style.backgroundColor = " #ffc900";
            } else if (event.target.classList.contains('five')) {
                findCategory(1);
                changPage()
                page05.style.display = 'block'
                for (let i = 0; i < lis.length; i++) {
                    lis[i].style.backgroundColor = "";
                }
                lis[i].style.backgroundColor = " #ffc900";
            }
        }
    }

    function findOrderList(currentPage) {
        $.ajax({
            url: "${pageContext.request.contextPath}/order/findOrderListByPage",
            type: "get",
            dataType: "json",
            data: {
                currentPage: currentPage,
                pageSize: 15,
                username: null
            },
            success: function (data) {
                $("#totalPage_o").html(data.totalPage);
                $("#totalCount_o").html(data.totalCount);

                var lis = "";
                var firstPage = '<li onclick="javascript:findOrderList(1)"><a href="javascript:void(0);">首页</a></li>';
                var beforeNum = data.currentPage - 1;
                if (beforeNum < 1) {
                    beforeNum = 1;
                }
                var beforePage = '<li onclick="javascript:findOrderList(' + beforeNum + ')" class="threeword"><a href="javascript:void(0);">上一页</a></li>'
                lis += firstPage;
                lis += beforePage;

                var begin;
                var end;
                if (data.totalPage < 10) {
                    begin = 1;
                    end = data.totalPage;
                } else {
                    begin = data.currentPage - 5;
                    end = data.currentPage + 4;
                    if (begin < 1) {
                        begin = 1;
                        end = begin + 9;
                    }
                    if (end > data.totalPage) {
                        end = data.totalPage;
                        begin = end - 9;
                    }
                }
                for (var i = begin; i <= end; i++) {
                    var li;
                    if (data.currentPage === i) {
                        li = '<li class="curPage" onclick="javascript:findOrderList(' + i + ');"><a href="javascript:void(0);">' + i + '</a></li>'
                    } else {
                        li = '<li onclick="javascript:findOrderList(' + i + ');"><a href="javascript:void(0);">' + i + '</a></li>'
                    }
                    lis += li;
                }

                var preNum = data.currentPage + 1;
                if (preNum > data.totalPage) {
                    preNum = data.totalPage;
                }
                var prePage = '<li onclick="javascript:findOrderList(' + preNum + ');" class="threeword"><a href="javascript:;">下一页</a></li>'
                var lastPage = '<li onclick="javascript:findOrderList(' + data.totalPage + ');" class="threeword"><a href="javascript:;">末页</a></li>'

                lis += prePage;
                lis += lastPage;

                $("#pageNum_o").html(lis);

                var orderList = data.list;
                var li =
                    '<tr align="center">\n' +
                    '    <th>姓名</th>\n' +
                    '    <th>电话</th>\n' +
                    '    <th>送货城市</th>\n' +
                    '    <th>送货地址</th>\n' +
                    '    <th>状态</th>\n' +
                    '    <th>折扣</th>\n' +
                    '    <th>总金额</th>\n' +
                    '    <th>送货员</th>\n' +
                    '    <th>操作</th>\n' +
                    '</tr>';
                var list_sel = [];
                var list_id = [];
                for (var i = 0; i < orderList.length; i++) {
                    var order = orderList[i];
                    var user = order.user;
                    li +=
                        '<tr class="change">\n' +
                        '    <td>' + user.trueName + '</td>\n' +
                        '    <td>' + user.telephone + '</td>\n' +
                        '    <td>' + user.city + '</td>\n' +
                        '    <td>' + user.address + '</td>\n' +
                        '    <td>\n' +
                        '        <select class="order_sel">\n' +
                        '            <option value="0">未发货</option>\n' +
                        '            <option value="1">已发货</option>\n' +
                        '            <option value="2">订单完成</option>\n' +
                        '            <option value="3">订单取消</option>\n' +
                        '        </select>\n' +
                        '    </td>\n' +
                        '    <td>' + order.discount + '</td>\n' +
                        '    <td>' + order.totalPrice + '</td>\n' +
                        '    <td>' + order.deliverMan + '</td>\n' +
                        '    <td><input type="button" value="删除" onclick="delOrder(' + order.orderId + ')"></td>\n' +
                        '</tr>';
                    list_sel.push(order.status);
                    list_id.push(order.orderId);
                }


                $("#order_list_head").html(li);
                var orderSel = $('select[class="order_sel"]')
                for (var i = 0; i < orderSel.length; i++) {
                    orderSel.eq(i).val(list_sel[i])
                    orderSel.eq(i).attr("name", list_id[i])
                    // console.log(orderSel.eq(i).attr("name"))
                    orderSel.eq(i).change(function () {
                        // console.log($(this).attr("name"))
                        editOrderStatus($(this).attr("name"), $(this).val());
                    })
                }
            }
        })
    }

    function editOrderStatus(orderId, status) {
        $.ajax({
            url: "${pageContext.request.contextPath}/order/changeOrderStatus",
            type: "post",
            dataType: "json",
            data: {
                orderId: orderId,
                status: status
            },
            success: function (data) {
                if (data.flag) {
                    console.log("订单状态更新成功")
                } else {
                    alert("更新失败");
                }
            },
            error: function () {
                // alert("更新失败");
            }
        });
    }

    function submitEditCategory() {
        var categoryId = $("#edit_category_id").val();
        var categoryName = $("#edit_category_input").val();
        $.ajax({
            url: "${pageContext.request.contextPath}/category/editCategory",
            type: "post",
            dataType: "json",
            data: {
                categoryId: categoryId,
                categoryName: categoryName
            },
            success: function (data) {
                if (data.flag) {
                    findCategory(1);
                    $('#popup_edit_category').css('display', 'none');
                    $('#overlay_edit_category').css('display', 'none');
                } else {
                    alert("更新失败");
                }
            },
            error: function () {
                // alert("更新失败");
            }
        });
    }

    function findCategory(isMange) {
        $.ajax({
            url: "${pageContext.request.contextPath}/category/findCategory",
            type: "get",
            dataType: "json",
            success: function (data) {
                var categoryList = data.data;
                var list = "";
                //是否处在菜品分类管理
                if (isMange) {
                    list +=
                        '<tr align="center">\n' +
                        '    <th>类别</th>\n' +
                        '    <th>操作</th>\n' +
                        '</tr>\n';
                    for (var i = 0; i < categoryList.length; i++) {
                        list +=
                            '<tr class="change">\n' +
                            '    <td>' + categoryList[i].categoryName + '</td>\n' +
                            '    <td>' +
                            '       <input type="button" value="修改" onclick="getCategory(' + categoryList[i].categoryId + ')">' +
                            '       <input type="button" value="删除" onclick="delCategory(' + categoryList[i].categoryId + ')">' +
                            '    </td>\n' +
                            '</tr>';
                        $("#category_list_head").html(list);
                    }
                } else {
                    for (var i = 0; i < categoryList.length; i++) {
                        list += '<option value="' + categoryList[i].categoryId + '">' + categoryList[i].categoryName + '</option>\n';
                    }
                    $("#add_dish_category").html(list);
                }
            }
        })
    }

    function addCategory() {
        var categoryName = $("#add_category_input").val();
        $.ajax({
            url: "${pageContext.request.contextPath}/category/addCategory",
            type: "post",
            data: {
                categoryName: categoryName
            },
            dataType: "json",
            success: function (data) {
                if (data.flag) {
                    $("#popup_add_category").css('display', 'none');
                    $("#overlay_add_category").css('display', 'none');
                    $("input[type=reset]").trigger("click");
                    findCategory(1);
                } else {
                    alert("添加失败");
                }
            }
        })
    }

    function delCategory(categoryId) {
        if (confirm("确定要删除吗？")) {
            $.ajax({
                url: "${pageContext.request.contextPath}/category/delCategory",
                type: "post",
                dataType: "json",
                data: {
                    categoryId: categoryId
                },
                success: function (data) {
                    if (data.flag) {
                        alert("删除成功");
                        findCategory(1);
                    } else {
                        alert(data.infoMsg);
                    }
                },
                error: function () {
                    alert(data.infoMsg);
                }
            });
        }
    }

    function getCategory(categoryId) {
        /*编辑菜品分类*/
        const closebtn_edit_category = document.getElementById('closebtn_edit_category');
        const popup_edit_category = document.getElementById('popup_edit_category');
        const overlay_edit_category = document.getElementById('overlay_edit_category');

        popup_edit_category.style.display = 'block';
        overlay_edit_category.style.display = 'block';

        closebtn_edit_category.addEventListener('click', function () {
            popup_edit_category.style.display = 'none';
            overlay_edit_category.style.display = 'none';
            $("input[type=reset]").trigger("click");
        })

        $.ajax({
            url: "${pageContext.request.contextPath}/category/findCategoryById",
            type: "get",
            dataType: "json",
            data: {
                categoryId: categoryId,
            },
            success: function (data) {
                if (data.flag) {
                    $("#edit_category_input").val(data.data.categoryName);
                    $("#edit_category_id").val(data.data.categoryId);
                } else {
                    alert("获取失败");
                }
            },
            error: function () {
                alert("获取失败");
            }
        });
    }

    function changPage() {
        document.querySelectorAll('.page').forEach(el => {
            console.log("display:" + el.style.display);
            el.style.display = 'none'
        })
    }

    function findUser() {
        $.ajax({
            url: "${pageContext.request.contextPath}/user/findAllUser",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data)
                var list =
                    '<tr align="center">\n' +
                    '    <th>用户名</th>\n' +
                    '    <th>真实姓名</th>\n' +
                    '    <th>电话号码</th>\n' +
                    '    <th>城市</th>\n' +
                    '    <th>地址</th>\n' +
                    '    <th>操作</th>\n' +
                    '</tr>';
                var userList = data.data;
                for (var i = 0; i < userList.length; i++) {
                    var user = userList[i];
                    list +=
                        '<tr class="change">\n' +
                        '    <td>' + user.username + '</td>\n' +
                        '    <td>' + user.trueName + '</td>\n' +
                        '    <td>' + user.telephone + '</td>\n' +
                        '    <td>' + user.city + '</td>\n' +
                        '    <td>' + user.address + '</td>\n' +
                        '    <td>' +
                        '       <input type="button" onclick="resetPWD(' + user.userId + ');" value="重置密码">' +
                        '       <input type="button" onclick="delUser(' + user.userId + ');" value="删除">' +
                        '   </td>\n' +
                        '</tr>';
                }
                $("#user_list_head").html(list);
            },
            error: function () {
                alert("查询失败");
            }
        });
    }

    function resetPWD(userId) {
        $.ajax({
            url: "${pageContext.request.contextPath}/user/resetPWD",
            type: "post",
            dataType: "json",
            data: {
                userId: userId,
            },
            success: function (data) {
                if (data.flag) {
                    alert("重置成功")
                } else {
                    alert("重置失败");
                }
            },
            error: function () {
                alert("重置失败");
            }
        });
    }

    function delUser(userId) {
        if (confirm('确定要删除该用户？操作不可逆！')) {
            $.ajax({
                url: "${pageContext.request.contextPath}/user/delUser",
                type: "post",
                dataType: "json",
                data: {
                    userId: userId,
                },
                success: function (data) {
                    if (data.flag) {
                        alert("删除成功");
                        findUser();
                    } else {
                        alert("删除失败");
                    }
                },
                error: function () {
                    alert("删除失败");
                }
            });
        }
    }

    function findDishList(currentPage) {
        $.ajax({
            url: "${pageContext.request.contextPath}/dish/findDish",
            type: "get",
            dataType: "json",
            data: {
                currentPage: currentPage,
                pageSize: 15,
                dishName: null,
                categoryName: null
            },
            success: function (data) {
                $("#totalPage").html(data.totalPage);
                $("#totalCount").html(data.totalCount);

                var lis = "";
                var firstPage = '<li onclick="javascript:findDishList(1)"><a href="javascript:void(0);">首页</a></li>';
                var beforeNum = data.currentPage - 1;
                if (beforeNum < 1) {
                    beforeNum = 1;
                }
                var beforePage = '<li onclick="javascript:findDishList(' + beforeNum + ')" class="threeword"><a href="javascript:void(0);">上一页</a></li>'
                lis += firstPage;
                lis += beforePage;

                var begin;
                var end;
                if (data.totalPage < 10) {
                    begin = 1;
                    end = data.totalPage;
                } else {
                    begin = data.currentPage - 5;
                    end = data.currentPage + 4;
                    if (begin < 1) {
                        begin = 1;
                        end = begin + 9;
                    }
                    if (end > data.totalPage) {
                        end = data.totalPage;
                        begin = end - 9;
                    }
                }
                for (var i = begin; i <= end; i++) {
                    var li;
                    if (data.currentPage === i) {
                        li = '<li class="curPage" onclick="javascript:findDishList(' + i + ');"><a href="javascript:void(0);">' + i + '</a></li>'
                    } else {
                        li = '<li onclick="javascript:findDishList(' + i + ');"><a href="javascript:void(0);">' + i + '</a></li>'
                    }
                    lis += li;
                }

                var preNum = data.currentPage + 1;
                if (preNum > data.totalPage) {
                    preNum = data.totalPage;
                }
                var prePage = '<li onclick="javascript:findDishList(' + preNum + ');" class="threeword"><a href="javascript:;">下一页</a></li>'
                var lastPage = '<li onclick="javascript:findDishList(' + data.totalPage + ');" class="threeword"><a href="javascript:;">末页</a></li>'

                lis += prePage;
                lis += lastPage;

                $("#pageNum").html(lis);

                var orderList = data.list;
                var li =
                    '<tr align="center">\n' +
                    '    <th>菜名</th>\n' +
                    '    <th>单价</th>\n' +
                    '    <th>分类</th>\n' +
                    '    <th>做法</th>\n' +
                    '    <th>材料</th>\n' +
                    '    <th>描述</th>\n' +
                    '    <th>操作</th>\n' +
                    '</tr>';
                for (var i = 0; i < orderList.length; i++) {
                    var dish = orderList[i];
                    li +=
                        '<tr class="change">\n' +
                        '    <td>' + dish.dishName + '</td>\n' +
                        '    <td>&yen;' + dish.dishPrice + '</td>\n' +
                        '    <td>' + dish.dishCategory.categoryName + '</td>\n' +
                        '    <td>' + dish.cooking + '</td>\n' +
                        '    <td>' + dish.material + '</td>\n' +
                        '    <td>' + dish.description + '</td>\n' +
                        '    <td>' +
                        '       <input type="button" value="修改">' +
                        '       <input type="button" value="删除">' +
                        '    </td>\n' +
                        '</tr>'
                }
                $("#dish_list_head").html(li);
            },
            error: function () {
                alert("删除失败");
            }
        });
    }
</script>
</body>
</html>
